<template>
    <el-form ref="personFormRef" :model="ruleForm" status-icon :rules="rules" label-width="100px" label-position="left"
        class="demo-ruleForm">
        <el-form-item label="用户名：" prop="adminname">
            <el-input disabled="true" v-model="ruleForm.adminname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
            <el-input disabled="true" v-model="ruleForm.password" autocomplete="off" />
        </el-form-item>

        <el-form-item label="角色：" prop="role">
            <el-select v-model="ruleForm.role" placeholder="请选择添加的角色">
                <el-option v-for="item in role" :key="item.value" v-bind="item" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="权限：">
            <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" :default-checked-keys="checkedKeys" @check="fn" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="addPersonForm(personFormRef)">编辑管理员</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import { IPerson } from '../../mytype';
import service from '@/utils/service';
import { ElNotification } from 'element-plus'
import { getEditPeraonApi, editPersonApi } from "@/api/zhanghao"
import { role,data } from '@/mydata/data';

interface IProps {
    adminname: string
}

const emit = defineEmits()
const props = defineProps<IProps>()
const personFormRef = ref<FormInstance>()

const ruleForm = reactive<IPerson>({
    adminname: '',
    password: '',
    authority: []
})

const treeRef = ref()

let checkedKeys = ref([])

const rules = reactive<FormRules>({
    adminname: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    role: [{ required: true, message: '请选择添加的角色', trigger: 'change', }],
    authority: [{
        type: 'array',
        required: true,
        message: 'Please select at least one activity type',
        trigger: 'change',
    }],

})

const fn = (arg1: any, arg2: any) => {
    checkedKeys = arg2.checkedKeys
}

// 获取管理员信息
const getEditPerson = () => {
    getEditPeraonApi(props.adminname).then((res: any) => {
        if (res.data.code === '200') {
            let obj = res.data.data[0]
            ruleForm.adminname = obj.adminname
            ruleForm.password = obj.adminid
            ruleForm.role = obj.role
            checkedKeys = obj.checkedKeys
            treeRef.value.setCheckedKeys(checkedKeys)
            console.log('res', res);

        }
    })

}
getEditPerson()
watch(props, (newval, oldval) => {
    console.log("props");
    getEditPerson()
})

// 修改管理员信息
const addPersonForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid: any) => {
        if (valid) {
            getEditPerson()
            ruleForm.checkedKeys = checkedKeys
            editPersonApi(ruleForm)
                .then((res: any) => {
                    if (res.data.code === '200') {
                        ElNotification({
                            message: '修改管理员信息成功！',
                            type: 'success',
                        })
                        emit('editOk')
                    }
                })

        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>

<style scoped>
.el-input {
    width: 300px;
}

.el-select {
    width: 300px;
}
</style>